<template>

    <div class="bigbox">
        <div style="padding-top: 200px;" v-show="showloding">
            <van-loading size="50px" vertical>加载中...</van-loading>
        </div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-card v-for="item in list" :key="item" :desc="item.equipmentName" :title="item.number"
                v-show="item.equipmentStatus != 0">
                <template #tags>
                    <div>项目点：{{ item.entryName }}</div>
                    <div>进场时间：{{ item.applicationTime }}</div>
                    <div>责任人：{{ item.projectLeader }}</div>
                    <div v-show="item.belonging >= 1 && item.belonging <= 5">设备所属部门：数据{{ item.belonging }}部</div>
                    <div v-show="item.belonging == 6">设备所属部门：办公室</div>
                    <div v-show="item.belonging == 7">设备所属部门：其他</div>
                    <div v-show="item.realDepartment >= 1 && item.realDepartment <= 5">设备实在部门：数据{{ item.realDepartment
                        }}部</div>
                    <div v-show="item.realDepartment == 6">设备实在部门：办公室</div>
                    <div v-show="item.realDepartment == 7">设备实在部门：其他</div>
                </template>
                <template #footer>
                    <van-button size="mini" @click="showDetails(item)">详情</van-button>
                    <van-button size="mini" @click="showChange(item)">转移</van-button>
                    <van-button size="mini" @click="zhuis(item)">追溯</van-button>
                </template>
            </van-card>
            <van-empty description="暂无数据" v-show="list.length == 0" />
        </van-pull-refresh>
        <!-- 详情遮罩层 -->
        <van-overlay v-if="showDetailsValue" :show="showDetailsValue" @click="showDetailsValue = false"
            :lock-scroll="false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div class="deitDiv">
                        <detailsVue v-bind="deitItems"></detailsVue>
                    </div>
                    <van-button @click="showDetailsValue = false" type="primary" block>关闭</van-button>
                </div>
            </div>
        </van-overlay>

        <!-- 修改遮罩层 -->
        <van-overlay v-if="showChangeValue" :show="showChangeValue" @click="showChangeValue = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <changeVue v-bind="changeValue" @addEvent="closechange"></changeVue>
                </div>
            </div>
        </van-overlay>

        <!-- 追溯遮罩层 -->
        <van-overlay v-if="showZhuisValue" :show="showZhuisValue" @click="showZhuisValue = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div class="deitDiv">
                        <zhuisVue :zhuisId="zhuisId"></zhuisVue>
                    </div>
                    <van-button @click="showZhuisValue = false" type="primary" block>关闭</van-button>
                </div>
            </div>
        </van-overlay>

    </div>

</template>

<script setup>
import { showToast } from 'vant';
import { onMounted, ref, reactive } from "vue";
import detailsVue from "./details.vue";
import zhuisVue from "./zhuisu.vue";
import changeVue from './change.vue';
import {
    //获取数据列表
    gettables,
    //按部门查询
    gettablebm,
    getzslist,
} from "../../sevce/user";
const showloding = ref(true)
//登录用户信息
const name = ref()
const bm = ref('')
const qx = ref('')
const zw = ref('')

//读取本地存储 数据
function getuserinfo() {
    //读取本地存储的数据
    var data = JSON.parse(localStorage.getItem('userinfo'));
    if (data != null) {
        // console.log('本地存储数据', data.names)
        name.value = data.names
        bm.value = data.department
        qx.value = data.permissionId
        zw.value = data.position
    } else {
        router.push('/login')
    }
}
const list = ref([])

//获取表格数据
function gettable() {
    gettables(name.value, 2).then((res) => {
        // console.log(res)
        list.value = res.data
        showloding.value = false
    })
}

//追溯
// function zhuis(item) {
//     getzslist(item.id).then((res) => {
//         console.log(res.data)
//     })
// }
//查看详情
//需显示的详情项，传递到子组件
const deitItems = ref()
const showDetailsValue = ref(false)
function showDetails(item) {
    showDetailsValue.value = true
    deitItems.value = item
}
//查看追朔 
const zhuisId = ref()
const showZhuisValue = ref(false)
function zhuis(item) {
    showZhuisValue.value = true
    zhuisId.value = item.id
}




//修改值
const changeValue = ref()

const showChangeValue = ref(false)

function showChange(item) {
    showChangeValue.value = true
    changeValue.value = item
}
//关闭修改窗
function closechange() {
    showChangeValue.value = false
    gettable()
}

//下拉刷新
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
    if (zw.value != 0) {
        gettablebm(bm.value, 3).then((res) => {
            // console.log(res)
            list.value = res.data
        })
        setTimeout(() => {
            showToast('切换成功');
            loading.value = false;
            count.value++;
        }, 1000);
    } else {
        gettable()
        setTimeout(() => {
            showToast('已刷新');
            loading.value = false;
            count.value++;
        }, 1000);
    }


}

onMounted(() => {
    getuserinfo()
    gettable()

})
</script>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    // height: 100%;
}

.block {
    width: 100vw;
    height: 80vh;
    background-color: #fff;
}

.deitDiv {
    width: 100vw;
    height: 75vh;
    overflow: auto;
}

.bigbox {
    height: 92vh;
    overflow-y: scroll;

}
</style>